<template>
  <NScrollbar style="max-height: 60vh" trigger="none">
    <div style="padding: 16px 16px 8px">
      <div
        style="display: flex; justify-content: center; vertical-align: bottom; margin-bottom: 16px"
      >
        <img
          style="height: 108px; width: 108px"
          src="@main-window/assets/logo.png"
          alt="Logo of League Akari"
        />
      </div>
      <div class="about-para">
        <LeagueAkariSpan bold @click="() => handleClickEasterEgg()" /> (Version {{ app.version }})
        是一个免费且开源的应用软件，专注于提供一些额外的功能，以辅助英雄联盟的游戏体验，其几乎所有实现都依赖
        <a target="_blank" href="https://riot-api-libraries.readthedocs.io/en/latest/lcu.html"
          >League Client Update (LCU)</a
        >。
        <a
          target="_blank"
          href="https://github.com/Hanxven/LeagueAkari?tab=readme-ov-file#8-%E5%8F%82%E8%80%83"
          >项目参考</a
        >.
      </div>

      <div class="about-para-2">
        <span>Github：</span>
        <a
          target="_blank"
          href="https://github.com/Hanxven/LeagueAkari"
          style="text-indent: 0; margin-right: 8px"
          >League Akari</a
        >
        <a target="_blank" href="https://github.com/Hanxven/LeagueAkari">
          <img
            alt="GitHub Repo stars"
            src="https://img.shields.io/github/stars/Hanxven/LeagueAkari"
        /></a>
      </div>
      <div class="divider"></div>
      <NCard size="small">
        <ControlItem
          class="control-item-margin"
          label="检查更新"
          :label-description="`从下载源中 (${UPDATE_SOURCE_MAP[au.settings.downloadSource]}) 中检查更新`"
          :label-width="180"
        >
          <NFlex align="center">
            <NButton
              size="tiny"
              :loading="au.isCheckingUpdates"
              secondary
              type="primary"
              @click="() => handleCheckUpdates()"
              >检查更新</NButton
            >
            <NButton
              size="tiny"
              v-if="au.newUpdates"
              secondary
              @click="() => handleShowUpdateModal()"
              >新版本内容</NButton
            >
            <span v-if="au.lastCheckAt" style="font-size: 12px"
              >最近检查 {{ dayjs(au.lastCheckAt).locale('zh-cn').fromNow() }}</span
            >
          </NFlex>
        </ControlItem>
        <ControlItem
          v-if="au.updateProgressInfo"
          class="control-item-margin"
          label="更新流程"
          label-description="正在进行的更新流程"
          :label-width="180"
        >
          <NSteps
            size="small"
            horizontal
            :current="processStatus.current"
            :status="processStatus.status"
          >
            <NStep>
              <template #title><span class="step-title">下载更新包</span></template>
              <div class="step-description">
                已完成 {{ (au.updateProgressInfo.downloadingProgress * 100).toFixed() }} %
              </div>
              <div class="step-description" v-if="au.updateProgressInfo.phase === 'downloading'">
                剩余 {{ formatTime(au.updateProgressInfo.downloadTimeLeft) }}
              </div>
              <div
                class="step-description"
                v-if="au.updateProgressInfo.phase === 'download-failed'"
              >
                下载出错
              </div>
            </NStep>
            <NStep>
              <template #title><span class="step-title">解压更新包</span></template>
              <div class="step-description">
                已完成 {{ (au.updateProgressInfo.unpackingProgress * 100).toFixed() }} %
              </div>
              <div class="step-description" v-if="au.updateProgressInfo.phase === 'unpack-failed'">
                解压出错
              </div>
            </NStep>
            <NStep>
              <template #title><span class="step-title">等待重新启动</span></template>
              <div class="step-description">关闭应用后将进行自动更新流程</div>
            </NStep>
          </NSteps>
        </ControlItem>
        <ControlItem
          class="control-item-margin"
          label="更新文件夹"
          label-description="当前更新已下载的位置，若无法只能自动僧更新流程，将需要手动更新"
          :label-width="180"
          v-if="
            processStatus.current >= 2 ||
            (processStatus.current === 1 && processStatus.status !== 'error')
          "
        >
          <NButton size="tiny" secondary @click="() => aum.openDownloadDir()">打开目录</NButton>
        </ControlItem>
      </NCard>
      <div class="about-para copyright">© 2024 Hanxven. 本软件是开源软件，遵循 MIT 许可证。</div>
    </div>
  </NScrollbar>
</template>

<script setup lang="ts">
import ControlItem from '@shared/renderer/components/ControlItem.vue'
import LeagueAkariSpan from '@shared/renderer/components/LeagueAkariSpan.vue'
import { useAppStore } from '@shared/renderer/modules/app/store'
import { autoUpdateRendererModule as aum } from '@shared/renderer/modules/auto-update'
import { useAutoUpdateStore } from '@shared/renderer/modules/auto-update/store'
import dayjs from 'dayjs'
import { NButton, NCard, NFlex, NScrollbar, NStep, NSteps, useMessage } from 'naive-ui'
import { computed, h, inject } from 'vue'

const UPDATE_SOURCE_MAP = {
  github: 'Github',
  gitee: 'Gitee'
}

const au = useAutoUpdateStore()
const app = useAppStore()

const message = useMessage()

const handleClickEasterEgg = () => {
  message.create(() => h(LeagueAkariSpan, { bold: true }), {
    type: 'success',
    keepAliveOnHover: true
  })
}

const handleCheckUpdates = async () => {
  const result = await aum.checkUpdates()
  switch (result) {
    case 'no-updates':
      message.success('当前已是最新版本')
      break
    case 'new-updates':
      message.success('发现新版本')
      break
    case 'failed':
      message.warning('检查更新失败')
      break
  }
}

const appInject = inject('app') as any

const handleShowUpdateModal = async () => {
  appInject.openUpdateModal()
}

const formatTime = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 99) {
    return '99+ h'
  }

  if (hours > 0) {
    return `${hours.toFixed()} h`
  } else if (minutes > 0) {
    return `${minutes.toFixed()} m`
  } else {
    return `${secs.toFixed()} s`
  }
}

const processStatus = computed(() => {
  if (!au.updateProgressInfo) {
    return {
      current: 0,
      status: 'wait' as any // utilize 'any' to suppress type error
    }
  }

  switch (au.updateProgressInfo.phase) {
    case 'downloading':
      return {
        current: 1,
        status: 'process'
      }
    case 'download-failed':
      return {
        current: 1,
        status: 'error'
      }
    case 'unpacking':
      return {
        current: 2,
        status: 'process'
      }
    case 'unpack-failed':
      return {
        current: 2,
        status: 'error'
      }
    case 'waiting-for-restart':
      return {
        current: 3,
        status: 'process'
      }
    default:
      return {
        current: 0,
        status: 'wait'
      }
  }
})
</script>

<style lang="less" scoped>
.about-para {
  font-size: 13px;
}

.about-para-2 {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 13px;

  img {
    display: block;
  }
}

.copyright {
  margin-top: 8px;
  font-size: 12px;
  color: rgb(87, 87, 87);
}

.card-header-title {
  font-weight: bold;
  font-size: 18px;
}

.divider {
  height: 1px;
  background-color: rgb(54, 54, 54);
  margin: 12px 0px;
}

.control-item-margin {
  &:not(:last-child) {
    margin-bottom: 12px;
  }
}

.step-title {
  font-size: 12px;
}

.step-description {
  font-size: 11px;
}
</style>
